<template>
  <div class="common-body-wrapper">
    <search-header single-width="130" :searchList="searchList" @changeHeight="toRetTable" @confirmSearch="toSearch" @handleChange="handleSearchChange"
    :isCheckbox="true" :isNeedTree="true" :paramName="paramName" @setSelectedNode="setSelectedNode"></search-header>
    
    <div class="common-table-tree-wrapper">
      <div class="common-table-wrapper">
        <multi-fun-table :sortColumn='notFormatColumn' :orderType='sortType' :fixed-cols="fixedCols" :is-reset-table="isResetTable" :theads-info="theadsInfo" :tbodys-info="tbodysInfo" @handleMultiCheck="handleMultiCheck" @handleSortColumn="handleSortColumn" @searchFn="getList" @getNextPage="getNextPage">
          <!--按钮-->
          <div class="operate-btn-group" slot="operateBtnGroup">
            <a class="ake_btn ake_btn_text" v-if="isPermmited('MONTH:TICKET:BILL:PAYMENT_REPORT:EXPORT')" @click.prevent="exportData()">导出</a>
            <a class="ake_btn ake_btn_text" v-if="isPermmited('MONTH:TICKET:BILL:PAYMENT_REPORT:REBUILD')" @click.prevent="reBuild()">重新生成</a>
          </div>

          <!--普通列-->
          <template slot="tdCell" slot-scope="props">

            <el-table-column v-if="props.isMultiHeader" :label="props.label" align="center">
              <template v-for="(item, index) in props.children">
                <el-table-column v-if="item.checked" :key="index" :label="item.text" min-width="30" :prop="item.prop">
                  <template slot-scope="scope">
                    <span v-if="'otherActualAmount'==item.prop">
                      <span v-if="!scope.row[item.prop]">{{scope.row[item.prop]}}</span>
                      <a v-else class="imgLink" @click="openOtherMoneyDetailModal(scope.row)">{{scope.row[item.prop]}}</a>
                    </span>
                    <span v-else>{{ scope.row[item.prop]}}</span>
                  </template>
                </el-table-column>
              </template>
            </el-table-column>

            <el-table-column v-else :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
              <template slot-scope="scope">
                <span>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
            
          </template>

          <!--操作列内的按钮-->
          <template slot="operateCell" slot-scope="props">
            <el-table-column :fixed="props.fixed" :label="props.label" min-width="30">
              <template slot-scope="scope">
                <el-button title="导出详情" size="small" type="primary" icon="icon-export" class="ake-icon-font" @click="exportDetails(scope.row)" plain v-if="isPermmited('MONTH:TICKET:BILL:PAYMENT_REPORT:EXPORT_DETAIL')"></el-button>
              </template>
            </el-table-column>
          </template>
        </multi-fun-table>

        <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
      </div>
    </div>

    <basic-modal ref="otherMoneyDetailModal" width="580" static="true" :needModalFooter="false">
      <h3 slot="title">详情</h3>
      <div class="modal-body" slot="modal-body">
        <template>
          <table v-if="detailData && detailData.length" class="detailTable" border="1" cellspacing="0" cellpadding="0">
            <tr v-for="item in detailData">
              <td>{{item.payModeStr}}</td>
              <td>{{item.money}}</td>
            </tr>
          </table>
        </template>
      </div>
      <div class="modal-footer" slot="modal-footer"></div>
    </basic-modal>

    <ReBuildBtn ref="myReBuildBtn" :reqUrl="reqUrl" :timeDimensionList="timeDimensionList"></ReBuildBtn>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";

import ReBuildBtn from "@components/reBuildBtn/index.vue";

export default {
  name: 'tmpCharge',
  mixins: [common, stardardList, invokeModal],
  components: {
    ReBuildBtn: ReBuildBtn
  },
  data() {
    var today = [
      new Date(moment().subtract(1,'days').format("YYYY-MM-DD 00:00:00")),
      new Date(moment().format("YYYY-MM-DD 00:00:00"))
    ];
    return {
      reqUrl: '/monthTicketBillPaymentReport/rebuild',
      timeDimensionList:[
        { name: "日报", value: "date" },
        { name: "月报", value: "month" },
      ],
      total: 0,
      fixedCols: 2,
      paramName: "parkIds",
      searchList: [
        {
          index: 0,
          isShow: false,
          type: "select",
          name: "reportDimension",
          text: "时间维度",
          value: "DATE",
          isHandleChange: true,
          options: [
            { name: "日报", value: "DATE" },
            { name: "月报", value: "MONTH" },
          ]
        },
        {
          index: 1,
          isShow: false,
          type: "datePicker",
          pickerType: "daterange",
          format: "yyyy-MM-dd",
          name: "query_chargeDate",
          propName: "reportDateFrom,reportDateTo",
          text: "时间区间",
          value: today,
          style: { width: "360px" },
          pickerOptions: {
            disabledDate(time) {
              return time.getTime() > Date.now();
            }
          },
        }
      ],
      theadsInfo: [
        {
          index: 1,
          isShow: false,
          prop: "reportDateStr",
          text: "日期",
          minWidth: 90
        },
        {
          index: 2,
          isShow: false,
          prop: "parkName",
          text: "停车场",
          minWidth: 96
        },
        {
          index: 3,
          isShow: false,
          prop: "openActualAmount",
          text: "开通总额(元)",
          minWidth: 60
        },
        {
          index: 4,
          isShow: false,
          prop: "renewActualAmount",
          text: "续费总额(元)",
          minWidth: 60
        },
        {
          index: 5,
          isShow: false,
          prop: "refundActualAmount",
          text: "退费总额(元)",
          minWidth: 60
        },
        {
          index: 6,
          isShow: false,
          prop: "",
          text: "实收金额(元)",
          minWidth: 250,
          isMultiHeader: true,
          children: [
            {
              index: 0,
              isShow: false,
              prop: "totalActualAmount",
              text: "总",
            },
            {
              index: 1,
              isShow: false,
              prop: "cashActualAmount",
              text: "现金",
            },
            {
              index: 2,
              isShow: false,
              prop: "wechatActualAmount",
              text: "微信",
            },
             {
              index: 3,
              isShow: false,
              prop: "alipayActualAmount",
              text: "支付宝",
            },
            {
              index: 4,
              isShow: false,
              prop: "otherActualAmount",
              text: "其他",
            }
          ]
        },
      ],
      tbodysInfo: [],
      detailData: [], //实收金额-其他
    };
  },
  methods: {
    // 实收金额-其他详情
    openOtherMoneyDetailModal(rowData){
      if(rowData && rowData.paymodeList){
        this.detailData = []
        let arr = rowData.paymodeList
        for(let i = 0; i<arr.length; i++){
          let obj = arr[i]
          if(obj.payMode!=1 && obj.payMode!=4 && obj.payMode!=5){
            let num = parseFloat(obj.openActualAmount) + parseFloat(obj.renewActualAmount) - parseFloat(obj.refundActualAmount)
            obj.money = num.toFixed(2)
            this.detailData.push(obj)
          }
        }
      }
      this.toOpenModal('otherMoneyDetailModal')
    },
    // 重新生成按钮
    reBuild(){
      this.$refs.myReBuildBtn.reBuild()
    },
    getList() {
      let params = {
        page: this.pageNumber,
        rp: this.pageSize
      };
      this.tbodysInfo = []
      if(this.searchList[0].value=='DATE'){
        this.searchParams.reportDimension = 0
      }else if(this.searchList[0].value=='MONTH'){
        this.searchParams.reportDimension = 1
      }
      params = $.extend({}, this.searchParams, this.otherParams, params);
      API.fetchGet('/monthTicketBillPaymentReport/list',params).then(res=>{
        if(res.data && res.data.rows){
          let data = res.data
          this.tbodysInfo = data.rows
          this.total = data.total
        }
      },err=>{})
    },
    // 导出
    exportData() {
      let self = this;
      let params = {};
      params = $.extend({}, params, this.searchParams, this.otherParams);
      self.showDialog("确认导出该报表?", '', function () {
        self.toExportAsync('/monthTicketBillPaymentReport/export', params)
      })
    },
    // 导出详情
    exportDetails(row){
      let self = this;
      this.showDialog("是否确认导出记录？",[],function(){
        let params = {
          id: row.id
        };
        self.toExportAsync('/monthTicketBillPaymentReport/exportDetail', params);
      },"温馨提示",function(){
        //取消时不操作
      });
    },
    handleSearchChange(item) {
      switch (item.name) {
        case 'reportDimension':
          this.changeReportDimension(item);
          break;
      }
    },
    changeReportDimension(item) {
      let value = item.value,
        ThisSearchItem = this.searchList[1];
      var today = [new Date(moment().format('YYYY-MM-DD 00:00:00')), new Date(moment().add(1, 'days').format('YYYY-MM-DD 00:00:00'))];
      var month = new Date(moment().format('YYYY-MM-DD 00:00:00'));
      var year = new Date(moment().format('YYYY-MM-DD 00:00:00'));
      switch (value) {
        case 'DATE':
          ThisSearchItem.style = {
            width: '360px'
          };
          ThisSearchItem.pickerType = 'daterange';
          ThisSearchItem.format = 'yyyy-MM-dd';
          ThisSearchItem.value = today;
          break;
        case 'MONTH':
          ThisSearchItem.style = {
            width: '185px'
          };
          ThisSearchItem.pickerType = 'month';
          ThisSearchItem.format = 'yyyy-MM';
          ThisSearchItem.value = month;
          break;
        case 'YEAR':
          ThisSearchItem.style = {
            width: '125px'
          };
          ThisSearchItem.pickerType = 'year';
          ThisSearchItem.format = 'yyyy';
          ThisSearchItem.value = year;
          break;
      }
    },
  },
  filters: {
    
  }
};
</script>

<style lang="less" scoped>
.detailTable{
  width: 100%;
  border: 1px solid #f7f7f7;
  tr{
    td{
      text-align: center;
      border: 1px solid #f7f7f7;
    }
  }
}

.user-row-modal {
  .modal-body {
    min-height: 400px;
  }
  .first-item {
    width: 240px;
  }
}

.role-select {
  width: 240px;
}

#parkNameListModal {
  min-height: 400px;
}
</style>